import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Form, Row, Col, Input, Select, Button, Pagination, Popconfirm, message, Drawer, Space, Dropdown, Menu } from 'antd';
import ProCard, { CheckCard } from '@ant-design/pro-card';
import { deleteListKnowledge, getListKnowledge, ListKnowledge, patchListKnowledge } from '../../services/ant-design-pro/api';
import { CloseOutlined, CloudUploadOutlined, DeleteOutlined, EditOutlined, SettingOutlined } from '@ant-design/icons';
import style from "./index.less"
import SetUp from "../../components/setUp"
const { Option } = Select;
const Knowledge: React.FC = () => {
    const [knowledge, setKnowledge] = useState([]);
    const [count, setCount] = useState(0)
    const [visible, setVisible] = useState(false);
    const [show, setShow] = useState(false);
    useEffect(() => {
        getListKnowledge().then(res => {
            setKnowledge(res[0])
        })
    }, [count])

    const AdvancedSearchForm = () => {
        const [form] = Form.useForm();
        const getFields = () => {
            const children = [];
            children.push(
                <Col span={5} key={0}>
                    <Form.Item
                        name="title"
                        label="名称"
                    >
                        <Input placeholder="请输入页面名称" />
                    </Form.Item>
                </Col>,
                <Col span={5} key={1}>
                    <Form.Item
                        name="status"
                        label="状态"
                    >
                        <Select>
                            <Option value="publish">已发布</Option>
                            <Option value="draft">草稿</Option>
                        </Select>
                    </Form.Item>
                </Col>,

            );
            return children;
        };
        const onFinish = (values: any) => {
            ListKnowledge(values).then(res => {
                setKnowledge(res[0])
            })
        };
        return (
            <Form
                form={form}
                name="advanced_search"
                className="ant-advanced-search-form"
                onFinish={onFinish}
                style={{ background: "#fff", padding: "24px 12px", margin: "0,16px" }}
            >
                <Row gutter={24}>{getFields()}</Row>
                <Row>
                    <Col span={24} style={{ textAlign: 'right' }}>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button
                            style={{ margin: '0 8px' }}
                            onClick={() => {
                                form.resetFields();
                            }}
                        >
                            重置
                        </Button>
                    </Col>
                </Row>
            </Form>
        );
    };
    const confirm = (it: any) => {
        deleteListKnowledge(it.id).then(res => {
            if (res) {
                message.success('删除成功')
                setCount(count + 1)
            }
        })
    }
    const showDrawer = () => {
        setVisible(true);
    }; const onClose = () => {
        setVisible(false);
    };
    const ShowDrawer = () => {
        setShow(true);
    };
    const OnClose = () => {
        setShow(false);
    };
    const onStatus = (item: any) => {
        patchListKnowledge(item).then(res => {
            if(res){
                setCount(count + 1)
            }
        })
    }
    const menu = (item:any) => {
        return (
            <Menu>
                <Menu.Item key={0}>
                    {
                        item.status == "draft" ? "发布线上" : "设为草稿"
                    }
                </Menu.Item>
            </Menu>
        )
    }
    return (
        <div
            style={{
                background: '#F5F7FA',
            }}
        >
            <PageContainer
                fixedHeader
                header={{
                    title: '',
                    breadcrumb: {
                        routes: [
                            {
                                path: '/dashboard',
                                breadcrumbName: '工作台',
                            },
                            {
                                path: '/Knowledge',
                                breadcrumbName: '知识小测',
                            },
                        ],
                    },
                }}
            >
                <div className={style.top}><AdvancedSearchForm /></div>
                <CheckCard.Group style={{ width: '100%', padding: "24px", background: "#fff" }} size="large">
                    <div className={style.NewButton}>
                        <div style={{ flex: 1 }}></div>
                        <div>
                            <Button key="3" type="primary" onClick={ShowDrawer}>新建</Button>
                            <Drawer title="新建知识库" placement="right" closable={false} visible={show}
                                extra={
                                    <Space>
                                        <Button style={{ border: "none" }} onClick={OnClose}><CloseOutlined /></Button>
                                    </Space>
                                }
                                footer={
                                    <Space style={{ float: "right" }}>
                                        <Button onClick={onClose}>取消</Button>
                                        <Button>创建</Button>
                                    </Space>
                                }
                            >
                                <SetUp />
                            </Drawer>
                        </div>
                    </div>
                    <Row>
                        {
                            knowledge && knowledge.length > 0 ? knowledge.map((item: any, index) => {
                                return <Col span={6}

                                    key={index}>
                                    <ProCard bordered>
                                        <img
                                            alt="example"
                                            src={item.cover}
                                            style={{ width: '100%', background: "#fff", height: "120px" }}
                                        />
                                        <div>{item.title}</div>
                                        <ul className={style.ul_icon}>
                                            <li><EditOutlined /></li>
                                            <li>
                                                <Dropdown overlay={menu(item)} placement="topCenter" arrow>
                                                    <CloudUploadOutlined onClick={()=>onStatus(item)} />
                                                </Dropdown>
                                            </li>
                                            <li>
                                                <SettingOutlined onClick={showDrawer} />
                                                <Drawer title="更新知识库" placement="right" closable={false} visible={visible}
                                                    extra={
                                                        <Space>
                                                            <Button style={{ border: "none" }} onClick={onClose}><CloseOutlined /></Button>
                                                        </Space>
                                                    }
                                                    footer={
                                                        <Space style={{ float: "right" }}>
                                                            <Button onClick={onClose}>取消</Button>
                                                            <Button>更新</Button>
                                                        </Space>
                                                    }
                                                >
                                                    <SetUp />
                                                </Drawer>
                                            </li>
                                            <li>
                                                <Popconfirm
                                                    title="确认删除这个评论？"
                                                    onConfirm={() => confirm(item)}
                                                    okText="Yes"
                                                    cancelText="No"
                                                >
                                                    <DeleteOutlined />
                                                </Popconfirm>
                                            </li>
                                        </ul>
                                    </ProCard>
                                </Col>
                            }) : "暂无数据"
                        }
                    </Row>
                    <Pagination
                        total={knowledge.length}
                        showTotal={total => `Total ${total} items`}
                        defaultPageSize={20}
                        defaultCurrent={1}
                        className={style.page}
                    />
                </CheckCard.Group>

            </PageContainer>
        </div>
    )
}
export default Knowledge